<script setup lang="ts">
defineOptions({
  name: "pmTitle"
});

import { ref, inject, computed, markRaw, onMounted, nextTick } from "vue";
import { useRouterStoreHook } from "@/store/modules/router";
import lockOn from "@/assets/svg/common/lockOn.svg?component";
import lockOff from "@/assets/svg/common/lockOff.svg?component";
import commonSearchV2 from "@/views/common/components/commonSearchV2/index.vue";
import {
  ChartListType,
  ChartTypeType,
  ChartListKey,
  ChartTypeKey,
  LockChangeCallBackType,
  LockChangeCallBackTypeKey,
  ExportCallBackType,
  ExportCallBackTypeKey
} from "../utils";
import { useSearchOption } from "../hooks";

const routerStore = useRouterStoreHook();

const searchLoading = defineModel("loading", { type: Boolean, default: false });

// 1  厂务PM计划     2   机台PM计划
const chartList = inject<ChartListType>(ChartListKey, ref<Array<number>>([1]));
// gunter  甘特图   chart  table图
const chartType = inject<ChartTypeType>(ChartTypeKey, ref<string>("gunter"));

interface Props {
  // 1 厂务设备    2 FAB机台
  chart: number;
}

const props = withDefaults(defineProps<Props>(), {
  chart: 1
});

const lock = defineModel("lock", { type: Boolean, default: false });

const icon = computed(() => {
  if (chartList.value?.length < 2) return false;
  return lock.value ? markRaw(lockOff) : markRaw(lockOn);
});

const emits = defineEmits(["submit", "reset"]);

const searchOption = ref<Array<CommonSearch.SearchOption>>([]);
const pmAeraMap = ref<Map<string, Record<string, any>>>();
let defaultParams: any = {};
let currentParams: any = {};

const exportCallBackHandler = inject<ExportCallBackType>(ExportCallBackTypeKey);

const exportHandler = async () => {
  if (props.chart === 1) {
    exportCallBackHandler("factory");
  } else if (props.chart === 2) {
    exportCallBackHandler("workbench");
  }
};

const getDefaultParams = () => {
  if (props.chart === 1) {
    defaultParams = {
      due: true,
      early: true,
      late: true,
      fab: routerStore.subject === "ALL" ? "" : routerStore.getPmsClass
    };
    if (chartType.value === "chart") {
      defaultParams["pageNumber"] = 1;
      defaultParams["pageSize"] = 9999;
    }
  } else if (props.chart === 2) {
    defaultParams = {
      pageNum: 1,
      pageSize: 9999,
      className: routerStore.subject === "ALL" ? "" : routerStore.getSubject
    };
  }
  return defaultParams;
};

const getCurrentParams = (form: any) => {
  if (props.chart === 1) {
    const { area } = form;
    let fab = "";
    if (routerStore.subject === "ALL") {
      fab = pmAeraMap.value.get(area)?.fab || "";
    } else {
      fab = routerStore.getPmsClass;
    }
    currentParams = { ...currentParams, ...form, fab };
  } else if (props.chart === 2) {
    currentParams = { ...currentParams, ...form };
  }
  return currentParams;
};

const submitSearchFormHandler = (form: any) => {
  getDefaultParams();
  getCurrentParams(form);
  const params = { ...defaultParams, ...currentParams };
  emits("submit", params);
};

const resetSearchFormHandler = async (form: any) => {
  emits("reset");
  await nextTick();
  submitSearchFormHandler(form);
};

const init = async () => {
  searchOption.value = await useSearchOption(props.chart, chartType.value || "gunter", p => (pmAeraMap.value = p));
};

const lockChangeHandler = inject<LockChangeCallBackType>(LockChangeCallBackTypeKey);

const lockClickHandler = () => {
  lock.value = !lock.value;
  lockChangeHandler(props.chart === 1 ? "factory" : "workbench", !lock.value);
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <div class="pm-title">
    <div class="pm-title-left">
      <div class="search-left-label">{{ chart === 1 ? "厂务设备" : "FAB机台" }}</div>
      <div v-if="icon" class="search-left-lock">
        <component :is="icon" class="lock-icon" @click="lockClickHandler" />
      </div>
      <div class="search-left-export">
        <px-button v-has="`${routerStore.getSubject}_FAB_MAINTENANCE_PMPLAN_EXPORT_BTN`" type="primary" plain @click="exportHandler">导出</px-button>
      </div>
    </div>
    <div class="pm-title-right">
      <commonSearchV2
        v-if="searchOption?.length"
        ref="commonSearchRef"
        v-model:loading="searchLoading"
        :option="searchOption"
        @submit="submitSearchFormHandler"
        @reset="resetSearchFormHandler"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pm-title {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;

  .pm-title-left {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 180px;

    .search-left-label {
      font-weight: 600;
      line-height: 1;
      color: #555;
      white-space: nowrap;
    }

    .search-left-lock {
      .lock-icon {
        width: 22px;
        color: var(--px-color-primary);
        cursor: pointer;
      }
    }
  }

  .pm-title-right {
    flex: 1;
  }
}
</style>
